<template>
    <div class="container">
        <!-- 左边实时态区域 -->
        <div class="left">
            <!-- <div class="bk-img"></div> -->
            <div class=" content" ref="resizeDiv">
                <img src="../assets/gk.png" alt="" ref="imgDiv">
                <div class="signalight-group">
                    <SignaLightGroup class="light-group" v-for="(it, index) in lightGroupObj" :key="index"
                        :groupDirection="it.groupDirection" :singleSize="37" :groupSize=117 :leftColor="it.leftColor"
                        :centerColor="it.centerColor" :rightColor="it.rightColor" />
                    <FlowPipeline class="light-renxin" :color="it.renxinColor" :directionRotate="it.groupDirection"
                        v-for="(it, index) in lightGroupObj" :key="index" />
                    <el-text class="count-down" type="warning">{{ runStatus.time < 10 ? '0' + runStatus.time :
                        runStatus.time }}</el-text>
                            <el-text type="warning" style="position: absolute; top:370px;left:472px;font-size: 30px;">
                                {{ runStatus.phaseTime == 0 ? '相位时间' : runStatus.phaseTime == 1 ? '绿闪时间' : '黄灯时间'
                                }}</el-text>
                </div>
            </div>
        </div>

        <!-- 右边操作区域 -->
        <div class="right">
            <div class="header"><el-text> 同步状态{{ serialState }}</el-text></div>
            <div class="control-box">
                <el-divider>实时控制</el-divider>
                <div class="btn-group">
                    <el-button class="btn-group-item">全红控制</el-button>
                    <el-button class="btn-group-item">关灯控制</el-button>
                    <el-button class="btn-group-item">黄闪控制</el-button>
                    <el-button class="btn-group-item">绿波控制</el-button>
                    <el-button class="btn-group-item">多时段控制</el-button>
                </div>
            </div>
            <div class="">
                <el-divider>方案选择</el-divider>
                <div class="scheme-select">
                    <el-select v-model='schemeValue' placeholder="请选择方案" style="width: 200px">
                        <el-option v-for="item in 16" :key="item" :label="'方案' + item" :value="item - 1" />
                    </el-select>
                    <el-button type="primary">执行</el-button>
                </div>
            </div>
            <div>
                <el-divider>控制状态</el-divider>
                <div class="status">
                    <div>
                        <el-text>控制方式：</el-text><el-text>{{ controlMode === 0 ? '多时段控制' : '绿波控制' }}</el-text>
                    </div>
                    <div>
                        <el-text>控制方案：</el-text><el-text>{{ '方案' + (schemeValue + 1) }}</el-text>
                    </div>
                    <div>
                        <el-text>信号机时间：</el-text><el-text>{{ runStatus.rtc }}</el-text>
                    </div>
                </div>
            </div>
            <div>
                <el-divider>应急控制</el-divider>
                <div class="emergency-control">
                    <div>
                        <el-button :icon="ArrowUpBold" size="large" type="primary" />
                    </div>
                    <div>
                        <el-button :icon="ArrowLeftBold" size="large" type="primary" />
                        <el-button size="large" type="danger">停止</el-button>
                        <el-button :icon="ArrowRightBold" size="large" type="primary" />
                    </div>
                    <div>
                        <el-button :icon="ArrowDownBold" size="large" type="primary" />
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { ref, reactive, onMounted, onBeforeUnmount, onUnmounted } from 'vue'
    import SignaLightGroup from '../components/SignaLightGroup.vue'
    import { ArrowUpBold, ArrowDownBold, ArrowLeftBold, ArrowRightBold } from '@element-plus/icons-vue'
    //import { IsignaLightStatus } from '../../../main/lib/C300ProtocolHandler'
    import FlowPipeline from '../components/FlowPipeline.vue'
    import { ElMessage } from 'element-plus'

    //按比例调整图片大小
    const scaleSize = ref(0)
    const scaleStart = ref("")
    const resizeDiv = ref<Element>({} as Element)
    const imgDiv = ref<Element>({} as Element)
    //方案号
    const schemeValue = ref(1)
    //控制方式
    const controlMode = ref(0)
    const updateSize = (_) => {
        scaleSize.value = imgDiv.value.getBoundingClientRect().width / 1065
        scaleStart.value = imgDiv.value.getBoundingClientRect().x + 'px'
    };

    const resizeObserver = new ResizeObserver(updateSize);

    onBeforeUnmount(() => {
        resizeObserver.disconnect();
    });
    //按比例调整图片大小


    const serialState = ref(false)
    //轮询状态
    const timerInterval = setInterval(async () => {
        const data = await window.electronApi.getRealTimeStatus()
        if (!data) return
        Object.assign(runStatus, data)
        lightGroupObj.forEach((item, index) => {
            if (index === 0) index = 4
            item.leftColor = changeLight(runStatus.status[index - 1] & 0x07)
            item.centerColor = changeLight(runStatus.status[index - 1] >> 3 & 0x07)
            item.rightColor = changeLight(runStatus.status[index - 1] >> 6 & 0x07)
            item.renxinColor = changeLight(runStatus.status[index - 1] >> 9 & 0x07, true)
        })
    }, 500);

    const runStatus = reactive<any>({})
    onMounted(() => {
        if (resizeDiv.value) {
            resizeObserver.observe(resizeDiv.value)
        }

        //监听推送串口状态
        window.electronApi.onSerialState((_, val) => {
            if (val.code === 200) {
                serialState.value = true
            } else {
                ElMessage({
                    type: 'error',
                    message: val.err,
                })
            }
        })
    })

    onUnmounted(() => {
        clearInterval(timerInterval)
    })
    function changeLight(status: number, isrenxin: boolean = false): string {
        let color = 'dimgray'
        if (status === 1) {
            color = 'red'
        } else if (status === 2) {
            color = 'rgb(230,162,60)'
            if (isrenxin) color = 'green'
        } else if (status === 4) {
            color = 'green'
        }
        return color
    }

    const lightGroupObj = reactive([{
        leftColor: "red",
        centerColor: "yellow",
        rightColor: "green",
        renxinColor: "red",
        groupDirection: 0,
    }, {
        leftColor: "red",
        centerColor: "yellow",
        rightColor: "green",
        renxinColor: "red",
        groupDirection: 90,
    }, {
        leftColor: "red",
        centerColor: "yellow",
        rightColor: "green",
        renxinColor: "red",
        groupDirection: 180,
    }, {
        leftColor: "red",
        centerColor: "yellow",
        rightColor: "green",
        renxinColor: "red",
        groupDirection: 270,
    }])


</script>

<style lang="scss" scoped>
    .container {
        display: flex;
        flex-direction: row;
        overflow: hidden;
    }

    .left {
        flex: 6;
        height: calc(100vh - 150px);
        box-sizing: border-box;
        display: flex;
        align-items: center;

        .content {
            .signalight-group {
                /* background-color: rgb(3, 3, 3); */
                width: 1065px;
                height: 891px;
                transform-origin: left top;
                /* border: 2px solid black; */
                transform: translateX(v-bind(scaleStart)) scale(v-bind(scaleSize));
                overflow: hidden;
            }

            img {
                position: absolute;
                left: 50%;
                height: 100%;

                transform: translateX(-50%);
            }

            .count-down {
                position: absolute;
                left: 492px;
                top: 410px;
                font-size: 70px;
            }

            width: 100%;
            height: 100%;
            min-width: 1045px;
            /* background-image: url('../assets/gk.png');
            background-size: contain;
            background-position: center;
            background-repeat: no-repeat; */
            position: relative;
            /*  transform-origin: left top;
            transform: var(--resize-whith); */

            .light-group {
                position: absolute;
            }

            .light-group:nth-child(1) {
                top: 203px;
                left: 535px;
            }

            .light-group:nth-child(2) {
                top: 490px;
                left: 696px;
            }

            .light-group:nth-child(3) {
                top: 644px;
                left: 409px;
            }

            .light-group:nth-child(4) {
                top: 364px;
                left: 246px;
            }

            .light-renxin {

                position: absolute;
            }

            .light-renxin:nth-child(5) {

                top: 256px;
                left: 402px;

            }

            .light-renxin:nth-child(6) {
                top: 426px;
                left: 573px;
            }

            .light-renxin:nth-child(7) {
                top: 598px;
                left: 403px;
            }

            .light-renxin:nth-of-type(8) {
                top: 426px;
                left: 232px;
            }
        }
    }

    .right {
        flex: 4;
        max-width: 500px;
        min-width: 400px;
        height: calc(100vh - 150px);
        padding: 10px 20px 10px 10px;
        /* display: grid; */
        /* grid-template-rows: 40px 2fr 1fr 2fr 4fr;
        gap: 8px; */
        box-sizing: border-box;
        overflow: hidden;
        /* border:1px solid rgb(240, 237, 237);
        box-shadow: 10 1 1 10 cornflowerblue ; */

        .scheme-select {
            display: flex;
            justify-content: space-evenly;
            padding: 0 15px 15px 15px;

            div {
                flex: 1;
                margin-right: 10px;
            }

            .el-button {
                width: 100px;
            }
        }

        >div {
            border: 1px solid rgb(255, 255, 255);
            /* background-color: white; */
            border-radius: 8px;
            margin: 10px 0;
            box-shadow: 1px 1px 5px rgb(0, 0, 0, 0.3);
        }

        .header {
            padding: 5px;
            /*  font-size: 18px;
            border: none;
            height: 20px; */
            box-shadow: none;
        }

        .control-box {
            padding-bottom: 15px;

            .btn-group {
                display: flex;
                flex-wrap: wrap;
                justify-content: center;

                .btn-group-item {

                    margin: 10px;
                    min-width: 160px;
                    max-width: 320px;
                    flex: 1;

                    .btn-group-item:nth-child(5) {
                        flex-grow: 0;
                        width: 50%;
                    }
                }
            }
        }

        .status {
            div {
                margin: 10px 0 20px 15px;
                font-size: 18px;
            }
        }

        /* .emergency-control {
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            grid-template-rows: 1fr 1fr 1fr;
            place-items: center;
            height: 80%;

            .el-button {
                width: 60px;
                height: 60px;
                margin: 5px;
            }

            .el-button:nth-child(1) {
                grid-row: 1 / span 1;
                grid-column: 2 / span 1;
            }

            .el-button:nth-child(2) {
                grid-row: 2 / span 1;
                grid-column: 1 / span 1;
                margin-left: 40px;
            }

            .el-button:nth-child(3) {
                grid-row: 2 / span 1;
                grid-column: 3 / span 1;
                margin-right: 40px;
            }

            .el-button:nth-child(4) {
                grid-row: 3 / span 1;
                grid-column: 2 / span 1;
            }

            .el-button:nth-child(5) {
                grid-row: 2 / span 1;
                grid-column: 2 / span 1;
            }
        } */

        .emergency-control {
            display: flex;
            flex-direction: column;
            align-items: center;

            >div {
                margin-bottom: 20px;
            }

            >div:nth-child(2) {
                .el-button {
                    margin: 0 15px
                }
            }
        }
    }


</style>